<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>大单透视</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			p {margin:0px;}
			#box{
				display:inline-block;
				margin:0px 5px 0px 80px;
				border-box:50%;
				width:10px;
				height:10px;
			}
			.fixedBox{
				border: 1px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}
			.draggable{
				width:22%;
				height:20%; 
				max-height:80%;
				overflow-y: scroll;
				overflow-x: hidden;
				background-color:rgba(50, 50, 50, 0.5);
				border-width:0px;
				border-color:rgb(51, 51, 51);
				border-radius:0px;
				padding:0px;
				color:#fff;
				position:absolute;
				cursor:move;
				white-space:nowrap;
				user-select: none;
				transition:left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
			}
			.draggable::-webkit-scrollbar {
			  width: 7px;
			  height: 8px;
			}
			.draggable::-webkit-scrollbar-thumb {
			  background-color: rgb(144 147 153 / 30%);
				border-radius: 2px;
				box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
			}

			.draggable::-webkit-scrollbar-track {
			  background-color: rgb(0 0 0 / 5%);
			}
			
			.draggable::-webkit-scrollbar-thumb:hover {
				background-color: #b6b7b9;
			}
			.others{
				display:none;
				margin-bottom: 0px;
			}
			.front20{
			    margin-bottom: 2px;
			}
			.opt-bar{
				margin-bottom: 3px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #968d8d80;
				margin-left: 10px;
				margin-right: 3px;
				padding-right: 6px;
				cursor: pointer;
			}
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="DatePicker/WdatePicker.js"> </script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>
	<body> 
		<div id="towrite" class="fixedBox" style="display:none;">
			<div id="title" style="height:50px;"> 
			</div>
			<div id="chart" style="position:relative; float:left;margin-top:-5px;border: none;"></div>
			<div class="draggable" id="draggable" style="top:45px;">
				<div class="front20"></div>	
				<div class="others"></div>			
				<div class="opt-bar"><span id="showAll"></span></div>
			</div>
			<!-- <div id="towrite1" class="fixedBox" style="position:relative; float:left;margin-top:-18px;"></div> -->
		</div>
			
		<script>
			 // 获取可拖动的div元素
			let draggableDiv = document.getElementById('draggable');

			let currentX = 0;
			let currentY = 0;
			let initialX = 0;
			let initialY = 0;
			let xOffset = 0;
			let yOffset = 0;
			//draggableDiv.style.top = document.querySelector('#towrite').clientHeight*0.5+'px';
			draggableDiv.addEventListener('mousedown', (e) => {
				// 鼠标按下时记录初始位置
				initialX = e.clientX - xOffset;
				initialY = e.clientY - yOffset;

				// 添加鼠标移动和松开的事件监听器
				document.addEventListener('mousemove', onMouseMove);
				document.addEventListener('mouseup', onMouseUp);
			});

			function onMouseMove(e) {
				// 鼠标移动时更新div的位置
				xOffset = e.clientX - initialX;
				yOffset = e.clientY - initialY;
				if(yOffset>10 && yOffset>10){
					draggableDiv.style.top = (yOffset - 10) + 'px'; // 减去10px以避免遮挡
					draggableDiv.style.left = (xOffset - 10) + 'px';
				}				
			}

			function onMouseUp() {
				// 鼠标松开时移除事件监听器
				document.removeEventListener('mousemove', onMouseMove);
				document.removeEventListener('mouseup', onMouseUp);
			}
			let fs_opt_show_all = document.getElementById('showAll');
			fs_opt_show_all.innerText = '显示全部';
			fs_opt_show_all.addEventListener('click',function(e){
				e.stopPropagation();
				if(e.target.innerText == '显示全部'){
					e.target.innerText = '关闭显示全部';
					document.querySelector('#draggable .others').style.display='block';
					draggableDiv.style.height='180px';
				}else{
					e.target.innerText = '显示全部';
					document.querySelector('#draggable .others').style.display='none';
					draggableDiv.style.height='20%';
				}				
			});
		</script>	
		<script>
		
			var intervalId;

			function toggleAutoRefresh() {
				if (intervalId) {
					// 清除定时器
					clearInterval(intervalId);
					intervalId = null;
					document.getElementById('refreshButton').textContent = '开启自动刷新';
				}
				else
				{
					intervalId = setInterval(function() {	
						getSource(jk);																				
					},50);
					document.getElementById('refreshButton').textContent = '关闭自动刷新';
				}
			}

			var dt = "";
			var tt = "";
			var gt = "";
			var k = 0;
			window.onload = function() {
				var day = new Date();
				gt = day.getTime();			
				mymonth = day.getMonth()+1;
				myday = day.getDate();
				if(mymonth >= 10){mymonth = mymonth;}else{mymonth = "0" + mymonth;}
				if(myday >= 10){myday = myday;}else{myday = "0" + myday;}
				tt = day.getFullYear() + "-" + mymonth + "-" + myday;	
				dt = tt;
				changeStyle();	
				getSource(jk);
			}		

			$(function() {
				intervalId = setInterval(function() {					
					getSource(jk);																				
				},50);
			})
			
			function minutesFromSpecificTimeToNow(specificHour, specificMinute) {
			  // 创建一个表示当前时间的Date对象
			  const now = new Date();
			  now.setHours(specificHour);
			  now.setMinutes(specificMinute);
			  now.setSeconds(0);
			  now.setMilliseconds(0);

			  // 创建一个表示特定时间的Date对象:09:30
			  const specificTime = new Date();
			  specificTime.setHours(9);
			  specificTime.setMinutes(30);
			  specificTime.setSeconds(0);
			  specificTime.setMilliseconds(0);

			  // 计算两个时间点之间的差异（以毫秒为单位）
			  const timeDifference = now - specificTime;

			  // 将时间差异转换为分钟
			  const minutesDifference = timeDifference / 60000;

			  // 返回分钟数，向上取整到最接近的整数
			  return Math.ceil(minutesDifference);
			}
			function time_range(beginTime, endTime) {
				var strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}

				var stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}

				var b = new Date();
				var e = new Date();
				var n = new Date();

				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					v = 1;					
					console.log(true)　　　　　　
					return true;				
				} else {
					console.log(false)
				    return false;     
				}
			}　　　
   　　　
			function changeStyle() {
				var div = document.getElementById("towrite");	
				div.style.display= "block";
				div.style.left= "0px"; 				
				div.style.width= "100%";	
				div.style.height= "100%";		
				div.style.fontSize="12px";	
				
				var div1 = document.getElementById("chart");	
				div1.style.border= "1px solid #696969";				
				div1.style.left= "0px"; 
				div1.style.width= "98%";
				div1.style.height= "84%";	
				
				// var div2 = document.getElementById("towrite1");					
				//  div2.style.border= "1px solid #696969";				
				//  div2.style.left= "0px"; 				
				// div2.style.width= "90%";	
				//  div2.style.height= "30%";				
			}
			
			Date.prototype.Format = function (fmt) {
				var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"h+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			};
			
			function keepTwoDecimal(num) {  
               var result = parseFloat(num);  
               if (isNaN(result)) {                     
                   return false;  
               }  
               result = Math.round(num * 100) / 100;  
               return result;  
			}	
			
			function NumberTransform(num) { 
				var result = num;
				if(Math.abs(num) > 100000000){
					result = num / 100000000;
					result = result.toFixed(2) + "亿";
				}else if(Math.abs(num) > 10000){
					result = num/10000;
					result = result.toFixed(2) + "万";
				}				   
				return result;  
			};	
			
			function cDayFunc(dp) { 
				var date = dp.cal.getNewDateStr();            
				BookingRmk(date);//调用其它函数并带上参数                
			}
			
			function BookingRmk(date){         
				tt = date;
				var date1 = new Date(tt);
				var date2 = new Date(dt);						
				k = 0;
				if(date1.getTime() < date2.getTime()){			
					k = 1;					
					tradeday();					
				}
				//切换日期，初始化
				v = 1;
				//alert(tt + dt)
				//alert(k)
				getSource(jk);						
			}
			
			function prev(){  //前一天
				pn = -1;
				var day = new Date(tt);	
				day.setTime(day.getTime() - 24*60*60*1000);	
				tt = day.Format("yyyy-MM-dd");
				BookingRmk(tt);				
			}
			
			function next(){  //后一天 				
				pn = 1;
				var day = new Date(tt);	
				day.setTime(day.getTime() + 24*60*60*1000);	
				tt = day.Format("yyyy-MM-dd");
				BookingRmk(tt);							
			}
			
			var pn = -1;
			function tradeday() {  //判断最后交易日
				var day = new Date(tt);							
				for (i = 1; i < 100; i++){	//节假日																										
					if(i > 1){
						day.setTime(day.getTime() + pn*24*60*60*1000);							
					}	
					tt = day.Format("yyyy-MM-dd");
					//alert(tt);
					if(tt == dt){	
						k = 0;
						getSource(jk);
						break;
					}
					var url ="https://apphis.longhuvip.com/w1/api/index.php?a=GetStockTrend&apiv=w31&c=StockL2History&StockID=" + dm + "&Day=" + tt;
					var res = [];
					$.ajax({
						type: "get",
						url: url,
						dataType: "text",
						async : false,
						cache:false,
						timeout:3000,						
						success: function(data) {							
							if(data.indexOf("MYSQL数据库链接出错!") == -1 && data.indexOf('"list":[]') == -1){
								var arr = JSON.parse(data);
								res = arr.trend;								
							}else{
								res.push("");
							}														
						}
					});
					if(res[0].length != 0){							
						break;
					}
				}
			}	
			
			var z = 0;  //刷新
			var v = 0;	//刷新		
			var gpdm = "";
			var gpmc = "";
			var preClose = 0;	//昨收盘						
			var dataBJ = [];
			var dataFS = [];//分时
			var jk = 2;//(0:30W; 1:50w; 2:100w; 3:300w; 4:1000w)
			draggableDiv.style.left = '100px';
			function getSource(p) {
				var u = decodeURI(window.location.href);								
				if(u.indexOf("##") > -1){
					var gp = u.split('##');				
					dm = gp[1];
					gpmc = gp[2];															
				}else{
					dm = "300293";
					gpmc = "蓝英装备";					
				}
								
				if(dm != gpdm || v == 1 || p != jk){					
					v = 0;
					jk = p;					
					gpdm = dm;					
					
					var url11 ="https://apphq.longhuvip.com/w1/api/index.php?a=GetStockTrendIncremental&apiv=w31&Type=1&c=StockL2Data&StockID=" + dm;						
					var url12 ="https://apphis.longhuvip.com/w1/api/index.php?a=GetStockTrend&apiv=w31&c=StockL2History&StockID=" + dm + "&Day=" + tt;											
					var url21 ="https://apphq.longhuvip.com/w1/api/index.php?a=GetMainMonitor_Trend_w30&Money=" + p + "&apiv=w31&c=StockL2Data&IsBS=0&StockID=" + dm;						
					var url22 ="https://apphis.longhuvip.com/w1/api/index.php?a=GetMainMonitor_Trend_w30&c=StockL2History&Money=" + p + "&apiv=w31&IsBS=0&StockID=" + dm + "&Date=" + tt;						
				
					//var url_fs_step1 = "https://apphwhq.longhuvip.com/w1/api/index.php?Order=0&st=1&a=GetMainMonitor_w30&c=StockYiDongKanPan&PhoneOSNew=1&DeviceID=05885182-c4cd-3156-9517-f03bba83a2ea&VerSion=5.14.0.4&Token=580c1c262bb52f017f633f6c09e6c413&Index=0&Money="+p+"&apiv=w36&StockID="+dm+"&UserID=659381&IsBS=0&";					
					var url_fs_step1 ="https://apphwhq.longhuvip.com/w1/api/index.php?Order=0&st=10000&a=GetMainMonitor_w30&c=StockYiDongKanPan&PhoneOSNew=1&DeviceID=05885182-c4cd-3156-9517-f03bba83a2ea&VerSion=5.14.0.4&Index=0&Money="+p+"&apiv=w36&StockID="+dm+"&IsBS=0&";
					var url1 = url11;
					var url2 = url21;
					if(k == 1){
						url1 = url12;
						url2 = url22;
					}
					
					var res = [];
					
					$.ajax({
						type: "get",
						url: url1,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {
							//alert(JSON.stringify(data))						
							//document.write(JSON.stringify(data));
							preClose = data.preclose_px;
							
							if(k == 0){
								var rq = data.day;
								tt = rq.substr(0,4) + "-" + rq.substr(4,2) + "-" + rq.substr(6,2);
								dt = tt;
							}							
							var arr = data.trend;
							 //document.write(JSON.stringify(arr)); 
							for (var i = 0; i < arr.length; i++){
								var aa = arr[i];
								res.push({"time":aa[0],"close":Number(aa[1]),"jprice":Number(aa[2]),"vol":Number(aa[3]),"x":Number(aa[4])});								
							}


                           
							if(res[res.length-1].time && res[res.length-1].time.indexOf(':')>-1)
							{
								let tt_arr = (res[res.length-1].time).split(':');
								let minutes = minutesFromSpecificTimeToNow(parseInt(tt_arr[0]),parseInt(tt_arr[1]));

                                /*
								/////跟分时数据显示
								// let ww = Math.max(
								//   document.body.scrollWidth, document.documentElement.scrollWidth,
								//   document.body.offsetWidth, document.documentElement.offsetWidth,
								//   document.body.clientWidth, document.documentElement.clientWidth
								// );
								// ww = ww*0.87;
								// let wwAvg = ww/240; 
								// if(minutes<=330 && minutes>0){	
								// 	if(minutes >= 120 && minutes <= 210){
								// 		minutes = 120;
								// 	}else if(minutes>210){
								// 		minutes = minutes - 90;
								// 	}
								// 	xOffset = minutes*wwAvg;
								// 	draggableDiv.style.left = xOffset+'px';
								// }else if(minutes<1){									
								// 	xOffset = ww*0.05;
								// 	draggableDiv.style.left = xOffset+'px';
								// }else if(minutes>330){
								// 	xOffset = ww;
								// 	draggableDiv.style.left = xOffset+'px';
								// }		
								*/						
							}
							//res[res.length-1].time
							//console.log(res[res.length-1])							
						}
					});					
					//document.write(JSON.stringify(res));
					
					var ZJB = 0;
					var ZJS = 0;
					var BuyAvgPrice = 0;
					var SellAvgPrice = 0;
					var zdmrzb = 0;
					var zdmczb = 0;
					dataBJ = [];
					$.ajax({
						type: "get",
						url: url2,
						dataType: "json",
						async : false,
						cache:false,
						timeout:3000,					
						success: function(data) {
							//alert(JSON.stringify(data))						
							//document.write(JSON.stringify(data));							
							var activeBuy = data.activeBuy;
							var passiveBuy = data.passiveBuy;
							
							if(activeBuy + passiveBuy != 0){
								zdmrzb = keepTwoDecimal((activeBuy / (activeBuy + passiveBuy)) * 100 )+ "%";
							}else{
								zdmrzb = "0%";
							}
							var activeSell = data.ActiveSell
							var PassiveSell = data.PassiveSell;
							if(activeSell + PassiveSell != 0){
								zdmczb = keepTwoDecimal((activeSell / (activeSell + PassiveSell)) * 100) + "%";
							}else{
								zdmczb = "0%";
							}
							ZJB = data.ZJB;							
							ZJS = data.ZJS;
							BuyAvgPrice = data.BuyAvgPrice;
							SellAvgPrice = data.SellAvgPrice;
							var arr = data.trend;
							 //document.write(JSON.stringify(arr)); 
							 if(arr)
							 {
							    for (var i = 0; i < arr.length; i++)
								{
									var aa = arr[i];
									var je = aa[2];
									if(je != 0)
									{
										var time = aa[0];
										var close = 0;
										var a = res.findIndex((v) => {  //(findIndex)判断数组有无指定对象   
											return v.time ===  time;
										});
										if(a > -1){
											var arrfind = res.find(function (item) {
												return item.time == time
											});										
											close = arrfind.close; 										
										}
										var color = "#FF0000"; 

										if(aa[6] !=0){
											color = "#FF69B4";
										}

										if(je < 0){
											color = "#00FF00";
										} 
										

										dataBJ.push(
											{
												yAxis:close,
												xAxis:aa[0],
												"je":je,
												"buy":aa[3],
												"sell":aa[4],
												"bsl":aa[5],
												"ssl":aa[6],
												itemStyle:{color: color,opacity: Math.min(0.9, 0.3 + Math.abs(je)/1000000 * 0.6) },  // 透明度设置
												symbolSize: Math.min(20, Math.max(5, Math.abs(je)/300000))
											})
										}
								}
							 }
													
						}
					});
					//document.write(JSON.stringify(dataBJ));

					dataFS = [];
					$.ajax({
							type: "get",
							url: url_fs_step1,
							dataType: "json",
							async : true,
							cache:false,
							timeout:3000,
							success: function(data) {
								if(data && data.List && data.List.length > 0){
									data.List.forEach(x=>{
										switch (x[0]) {
											case "1":
												x[0]='被动卖';
												break;
											case "2":
												x[0]='主动买';
												break;
											case "3":
												x[0]='被动买';
												break;
											case "4":
												x[0]='主动卖';
												break;
										}
										//x[0]:1被动卖 2主动买 3被动买 4主动卖 
										//x[2] 手数
										//x[3] 总额
										//x[4] 均价
										//x[5] 时间

										//format time with seconds to HH:mm:ss and HH:mm
										if(x[5] && x.length == 6){
											let arr_tt = x[5].split(" ");
											if(arr_tt.length == 2){
												x[6] = arr_tt[1];
												let arr_tss = arr_tt[1].split(":");
												if(arr_tss.length == 3){
													x[7] = arr_tss[0]+":"+arr_tss[1];
												}
											}
										}
										dataFS.push(x);
									})
									
									let rrfsf = [];
									try{
										if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
											rrfsf = dataFS.sort((a,b)=>{
												return new Date(b[5].replace(/-/g, '/')) - new Date(a[5].replace(/-/g, '/'));
											});
										}else{
											rrfsf = dataFS.sort((a,b)=>{
												return new Date(b[5]) - new Date(a[5]);
											});
										}
									}catch(_e){
										rrfsf = fsf;
									}
									
									let n = rrfsf.length;
									let lastestOneMinuteData = rrfsf.filter(cc=>{
										const now = new Date();
										const oneMinuteAgo = new Date(now.getTime() - 60000);
										return (new Date(cc[5]))>oneMinuteAgo;
									});//最近一分钟
									let str = '';
									lastestOneMinuteData.forEach(ffs=>{
										let cflag = '';
										if(ffs[0].indexOf('主动买')>-1){
											cflag = '#FF0000';
										}else if(ffs[0].indexOf('被动买')>-1){
											cflag = '#FFFF00';
										}else if(ffs[0].indexOf('主动卖')>-1){
											cflag = '#00FF00';
										}else if(ffs[0].indexOf('被动卖')>-1){
											cflag = '#00FFFF';
										}
										str += ffs[6]+"  <span style='color:"+cflag+"'>"+NumberTransform(ffs[3])+"</span>   <span style='color:red;'>"+ffs[2]+"</span>   <span style='color:"+cflag+"'>"+ffs[0]+"</span><br>";
									});
									document.querySelector('#draggable .front20').innerHTML = str;
									
									let viewOthersData = rrfsf.slice(lastestOneMinuteData.length,n);
									if(viewOthersData.length>0){
										let strOthers = '';
										viewOthersData.forEach(ffs=>{
											let cflag = '';
											if(ffs[0].indexOf('主动买')>-1){
												cflag = '#FF0000';
											}else if(ffs[0].indexOf('被动买')>-1){
												cflag = '#FFFF00';
											}else if(ffs[0].indexOf('主动卖')>-1){
												cflag = '#00FF00';
											}else if(ffs[0].indexOf('被动卖')>-1){
												cflag = '#00FFFF';
											}
											strOthers += ffs[6]+"  <span style='color:"+cflag+"'>"+NumberTransform(ffs[3])+"</span>   <span style='color:red;'>"+ffs[2]+"</span>   <span style='color:"+cflag+"'>"+ffs[0]+"</span><br>";
										});
										document.querySelector('#draggable .others').innerHTML = strOthers;
									}
								}
							}
						});	


                    ///////下面内容 先备份起来，st 先置 10000 ，现在看没有效率问题
					// $.ajax({
					// 	type: "get",
					// 	url: url_fs_step1,
					// 	dataType: "json",
					// 	async : false,
					// 	cache:false,
					// 	timeout:3000,					
					// 	success: function(data) {
					// 		if(data && null != data.Total){
					// 			var url_fs_step2 = `https://apphwhq.longhuvip.com/w1/api/index.php?Order=0&st=${data.Total}&a=GetMainMonitor_w30&c=StockYiDongKanPan&PhoneOSNew=1&DeviceID=05885182-c4cd-3156-9517-f03bba83a2ea&VerSion=5.14.0.4&Index=0&Money=${p}&apiv=w36&StockID=${dm}&IsBS=0&`;
					// 			$.ajax({
					// 				type: "get",
					// 				url: url_fs_step2,
					// 				dataType: "json",
					// 				async : false,
					// 				cache:false,
					// 				timeout:3000,
					// 				success: function(data) {
					// 				    if(data && data.List && data.List.length > 0){
					// 						data.List.forEach(x=>{
					// 							switch (x[0]) {
					// 								case "1":
					// 									x[0]='被动卖';
					// 									break;
					// 								case "2":
					// 									x[0]='主动买';
					// 									break;
					// 								case "3":
					// 									x[0]='被动买';
					// 									break;
					// 								case "4":
					// 									x[0]='主动卖';
					// 									break;
					// 							}
					// 							//x[0]:1被动卖 2主动买 3被动买 4主动卖 
					// 							//x[2] 手数
					// 							//x[3] 总额
					// 							//x[4] 均价
					// 							//x[5] 时间

					// 							//format time with seconds to HH:mm:ss and HH:mm
					// 							if(x[5] && x.length == 6){
					// 								let arr_tt = x[5].split(" ");
					// 								if(arr_tt.length == 2){
					// 									x[6] = arr_tt[1];
					// 									let arr_tss = arr_tt[1].split(":");
					// 									if(arr_tss.length == 3){
					// 										x[7] = arr_tss[0]+":"+arr_tss[1];
					// 									}
					// 								}
					// 							}
					// 							dataFS.push(x);
					// 						})
					// 					}
					// 				}
					// 			});	
					// 		}
					// 	}
					// });
					
					var div = document.getElementById('title');					
					div.innerHTML = '<input style="width: 90px;" type="text" id="PriceDate" name="PriceDate" class="Wdate" onFocus="WdatePicker({ onpicking: cDayFunc})" />';		
					var back = '<a href="javascript:prev();"  style="padding-left:10px;font-size:16px;color:#fff;">←</a>';				
					var forward = '<a href="javascript:next();"  style="font-size:16px;color:#fff;">→</a>';
					var autobutton ='<a href="javascript:void(0);" id="refreshButton" style="margin-right:30px;" onclick="toggleAutoRefresh()">关闭自动刷新</a>';

					div.innerHTML += back + forward +autobutton;
					
					var p1 = "<a href='javascript:void(0)' id='x0' onclick='getSource(0)'>" + "30万" + "</a>";	
					var p2 = "<a href='javascript:void(0)' id='x1' onclick='getSource(1)'>" + "50万" + "</a>";
					var p3 = "<a href='javascript:void(0)' id='x2' onclick='getSource(2)'>" + "100万" + "</a>";
					var p4 = "<a href='javascript:void(0)' id='x3' onclick='getSource(3)'>" + "300万" + "</a>";
					var p5 = "<a href='javascript:void(0)' id='x4' onclick='getSource(4)'>" + "1000万" + "</a>";						
					div.innerHTML +=  "<span>（ " + p1 + p2 + p3 + p4 + p5 + "）</span>";
					div.innerHTML += '<font style=padding-left:20px; size="2">' + gpdm + "&nbsp;&nbsp;&nbsp;" + gpmc + "</font>";
					var zlje = "<span style=color:#FF80FF;>" + NumberTransform(ZJB + ZJS) + "</span>";
					if(ZJB + ZJS < 0){
						zlje = "<span style=color:#7CFC00;>" + NumberTransform(ZJB + ZJS) + "</span>";
					}
					div.innerHTML += '<p style="margin:5px 0px 0px -10px;font-size:14px;"><span style=padding-left:20px;color:#fff;>' + "大单净额：" + zlje + 
									"<span style=padding-left:20px;color:#FF80FF;>买入成本：</span><span style=color:#fff;>" + BuyAvgPrice + 
									"</span><span style=padding-left:20px;color:#7CFC00;>卖出成本：</span><span style=color:#fff;>" + SellAvgPrice +
									"</span><span style=padding-left:20px;color:#FF80FF;>主动买入：</span><span style=color:#fff;>"+ zdmrzb +
									"</span><span style=padding-left:20px;color:#7CFC00;>主动卖出：</span><span style=color:#fff;>"+ zdmczb +
									"</span></p>";
					var aObj = document.getElementById("x" + p);
					aObj.style.color = "#FFA07A"; 
					
					document.getElementById("PriceDate").value = tt;
					
					GetChart(res);
				}else{
					z++;
					if(z == 60){
						z = 0;
						time_range("09:25","15:00")  //刷新数据
					}
				}	
			}
			
			function getParamValues(name, arr) {
				var ret = []
				var len = 241;					
				for (var i = 0; i < len; i++) {
					if(arr[i] != undefined){
						ret.push(arr[i][name])
					}else{
						ret.push(null)
					}
				}				
				return ret
			}
						
			function ratioCalculate(price, yclose) {  //涨跌幅
			  return ((price - yclose) / yclose * 100).toFixed(2);
			}
			
		</script>
		<script>		
			var myChart = null;
			function GetChart(arr) {
				var res = getParamValues("close", arr);
				
				//过滤null
				var values = arr.map(function(o){
					return o.close;
				}).filter(function(val) {
					return val !== null
				});
				
				//alert(JSON.stringify(values))
				var maxa = Math.max(...values);
				var mina = Math.min(...values);
				var zfa = Math.abs((maxa / preClose - 1));
				var zfb = Math.abs((mina / preClose - 1));
				
				function min() {
					if(zfa >= zfb){
						return Number(preClose * (1 - zfa)).toFixed(2)
					}else{
						return mina
					}								
				}
				function max() {
					if(zfb >= zfa){
						return Number(preClose * (1 + zfb)).toFixed(2)
					}else{
						return maxa
					}
				}
				
				var _interval = ((preClose-min()) / 4);
				//  var jm = "09:30"; 
				//  if(jk == 0){ 
				// 	 jm = ""; 
				//  } 
				if(myChart == null){
					myChart = echarts.init(document.getElementById('chart'));
					let hh = Math.max(
					  document.body.scrollHeight, document.documentElement.scrollHeight,
					  document.body.offsetHeight, document.documentElement.offsetHeight,
					  document.body.clientHeight, document.documentElement.clientHeight
					);
					draggableDiv.style.top = (hh*0.5 - 10)+'px';
					xOffset=21;
					yOffset=hh*0.5;
				}				
				myChart.clear();
				const upColor = '#ec0000';//00da3c
				const downColor = '#00FFFF';//ec0000
				var top2 = 65;
				var top21 = top2 - 3;
				var option = {
					animation:false, //取消动画效果	
						
					title: [
						{
							left: 'left',
							//text: '分时图'
						},
						{
							left: 'left',
							//text: '分时图'
						},
						{
							top: top21 + "%",
							left: 'left',
							//text: '成交量',
							textStyle: {
								color: "#fff", // 文字的颜色。
								fontSize:'14',
							}
						}
					],					
					tooltip: {   //提示框
						trigger: 'axis',						
						position: function (point, params, dom, rect, size) {
							　// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
							　　// 提示框位置
							　　var x = 0; // x坐标位置
							　　var y = 0; // y坐标位置
							
							　　// 当前鼠标位置
							　　var pointX = point[0];
							　　var pointY = point[1];
							
							　　// 外层div大小
							　　// var viewWidth = size.viewSize[0];
							　　// var viewHeight = size.viewSize[1];
							
							　　// 提示框大小
							　　var boxWidth = size.contentSize[0];
							　　var boxHeight = size.contentSize[1];
							
							　　// boxWidth > pointX 说明鼠标左边放不下提示框
							　　if (boxWidth > pointX) {
							　　　　x = pointX + 10;
							　　} else { // 左边放的下
							　　　　x = pointX - boxWidth-10;
							　　}
							
							　　// boxHeight > pointY 说明鼠标上边放不下提示框
							　　if (boxHeight > pointY) {
							　　　　y = 5;
							　　} else { // 上边放得下
							　　　　y = pointY - boxHeight;
							　　}
							
							　　return [x, y];
						},
						formatter(params) {  //添加文字	
							//alert(JSON.stringify(params))
							//document.write(JSON.stringify(params[0]));							
							var str = params[0].name + '<br>';
							if(params[0].name != "null"){
								params.forEach(item => {
									var name = item.seriesName;	
									var c = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>';									
									if(name == "分时"){
										str += c + '价格:' + item.data + "<br>";
										str += c + '涨幅:' + ratioCalculate(item.data, preClose) + "%<br>";
									}else if(name == "分时均价"){
										str += c + '均价:' + item.data + "<br>";		
																			
										var a = dataBJ.findIndex((v) => {  //(findIndex)判断数组有无指定对象   
											return v.xAxis ===  item.name;
										});
										if(a > -1){
											var arrfind = dataBJ.find(function (o) {
												return o.xAxis == item.name
											});
											var d = "";
											var d1 = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#FF0000"></span>';									
											var d2 = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#00FF00"></span>';									
											if(arrfind.je > 0){
												d = d1; 
											}else{
												d = d2;
											}										
											str += d + " 净买额: " + NumberTransform(arrfind.je) + "（" + arrfind.bsl + "个买单" + "，" + arrfind.ssl + "个卖单）<br>";
											
										}
										var fsf = dataFS.filter(fs=>{
											if(fs[7] && fs[7]==item.name){
												return true;
											}
											return false;
										});
										if(fsf && fsf.length > 0){
											let rrfsf = [];
											try{
												if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
													rrfsf = fsf.sort((a,b)=>{
														return new Date(a[5].replace(/-/g, '/')) - new Date(b[5].replace(/-/g, '/'));
													});
												}else{
													rrfsf = fsf.sort((a,b)=>{
														return new Date(a[5]) - new Date(b[5]);
													});
												}
											}catch(_e){
												rrfsf = fsf;
											}
											
											rrfsf.forEach(ffs=>{
												let cflag = '';
												if(ffs[0].indexOf('主动买')>-1){
													cflag = '#FF0000';
												}else if(ffs[0].indexOf('被动买')>-1){
													cflag = '#FFFF00';
												}else if(ffs[0].indexOf('主动卖')>-1){
													cflag = '#00FF00';
												}else if(ffs[0].indexOf('被动卖')>-1){
													cflag = '#00FFFF';
												}
												str += ffs[6]+"  <span style='color:"+cflag+"'>"+NumberTransform(ffs[3])+"</span>   <span style='color:red;'>"+ffs[2]+"</span>   <span style='color:"+cflag+"'>"+ffs[0]+"</span><br>";
											})
										}
									}else if(name.indexOf("成交量") > -1){
										str += c + item.seriesName + " : " + item.data + "<br>";
									}
								});							
								return str;
							}
						}
					},					
					// axisPointer: {   //上下区域连接 
					// 	 link: [ 
					// 		 { 
					// 			 xAxisIndex: 'all' 
					// 		 } 
					// 	 ], 
					// 		 label: { 
					// 		 backgroundColor: '#777' 
					// 	 } 
					//  }, 					
					grid: [
						{
							top: '3%',
							left: '5%',
							right: '8%',
							height: '65%', 
						},
						{
							top: '3%',
							left: '5%',
							right: '8%',
							height: '65%',  
						},
						{
							top: top2+3 + "%",  //成交量
							left: '5%',
							right: '8%',							
							height: '25%', 
						}
					], 		
					xAxis: [
						{
							//type: 'category',
							gridIndex: 0,
							data: getParamValues("time", arr),
							axisLine: { show: false	}, //x轴坐标线设置		
							axisTick: { show: false },
							splitLine: { show: false },								
							axisLabel: { show: false },							
						},
						{
							show: true,
							gridIndex: 1,
							data: getParamValues("time", arr),
							axisPointer: {show: false},		
							axisLabel: {
										show: false // 这里设置为false隐藏x轴刻度文字
									}					
						},
						{
							type: 'category',
							gridIndex: 2,                    //对应坐标轴所在grid的索引
							data: getParamValues("time", arr),
							axisTick: { show: false },
							axisLine:{  //x轴坐标线设置
								lineStyle:{
									color:"#808080",  //x轴坐标线颜色
									width: 2   // 坐标轴线宽
								}
							},						
							axisLabel:{	 //x轴标签设置	 
								showMaxLabel:true, //显示最大 tick(最后一天)
								interval: 0,
								//padding: [0, 0, 0, 30],
								formatter: function (value, index) {
									var c = index % 15;
									if(value != "null" && c == 0){
										return value
									}									
								},
								textStyle:{  //x轴文字
									color:"#FFF"
								}
							}							
						}
					],					
					yAxis: [
						{
							type: 'value',
							gridIndex: 0,
							position:'left',//坐标轴位置，移至右边
							//offset: 10,     //Y 轴相对于默认位置的偏移
							scale: true,   //刻度 自适应        
							splitArea: {     //分割区域颜色
								show: false  
							},	
							min: min(),							
							max: max(),							
							interval: _interval,							
							splitLine:{ //y轴网格线									
								show:false,								
								lineStyle: { 									
									color: '#808080',									 
									width: 1,    
									type: 'dashed', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true,							
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									//width: 2,    // 坐标轴线宽
									type: 'dotted',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								}, 
							},
							axisLabel: {  //y轴标签设置
								show: true,  //是否显示	
								 color: function (val) {
									val = Number(val).toFixed(2);
									if (val == preClose) {
									  return '#fff'
									}									
									return val > preClose ? '#FF8C00' : '#7FFFAA';
								  },															
								formatter: function (value){								
									return keepTwoDecimal(value)
								}
							}
						},
						{
							type: 'value',
							gridIndex: 1,
							position:'right',//坐标轴位置，移至右边
							offset: 0,     //Y 轴相对于默认位置的偏移
							scale: true,   //刻度 自适应        
							splitArea: {     //分割区域颜色
								show: false  
							},	
							min: min(),							
							max: max(),							
							interval: _interval,							
							splitLine:{ //y轴网格线									
								show:true,								
								lineStyle: { 									
									color: '#808080',									 
									width: 0.5,    
									type: 'dotted', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true,							
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									width: 1,    // 坐标轴线宽
									type: 'dotted',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								}, 
							},
							axisLabel: {  //y轴标签设置
								show: true,  //是否显示	
								color: function (val) {
								val = Number(val).toFixed(2);
									if (val == preClose) {
										return '#fff'
									}									
									return val > preClose ? '#FF8C00' : '#7FFFAA';
								},					

								formatter: function (value,index) {
									var resul = ratioCalculate(value, preClose);

									// 假设yAxisData是Y轴的数据数组，它的长度与标签数量相等
									var yAxisData =ratioCalculate(value, preClose); // 这里需要替换为你的Y轴数据数组
									// 如果index是最后一个标签的索引（注意这里需要减去1，因为索引是从0开始的）
									if (index === resul.length - 6) {
										// 返回空字符串或null来隐藏标签
										return '';
									}
									// 对于其他标签，正常显示
									//return value; 
									return Number(resul).toFixed(2) + '%'
								}
							}
						},
						{
							gridIndex: 2,  //对应坐标轴所在grid的索引
							position:'right',//坐标轴位置，移至右边
							offset: 0,
							scale: true,							           
							splitNumber: 2,
							splitLine:{ //y轴网格线									
								show:true,
								lineStyle: { 									
									color: '#808080', 
									width: 0.5,    
									type: 'dotted', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true,							
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									//width: 2,    // 坐标轴线宽
									type: 'dotted',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								}, 
							},
							axisLabel: {  //y轴标签设置
								show: true,								
								formatter: function (value){
									if(value != 0){							  
										return NumberTransform(value)
									}else{
										return 0
									}
								}
							}
						}
					],
				// 	dataZoom: [   //区间 
				// 	 { 
				// 	   type: 'inside', 
				// 	   xAxisIndex: [0, 1], 
				// 	   start: 0, 
				// 	   end: 100 
				// 	 }, 
				// 	 { 
				// 	   show: true, 
				// 	   xAxisIndex: [0, 1], 
				// 	   type: 'slider', 
				// 	   top: '85%', 
				// 	   start: 0, 
				// 	   end: 100 
				// 	 } 
				//    ], 
					series: [						
						{
							name: '分时',
							type: 'line',
							gridIndex: 0,
							xAxisIndex: 0,
							yAxisIndex: 0,
							data: getParamValues("close", arr),
							itemStyle: {
								normal: {
									lineStyle: {
										width: 1.5,//折线宽度
										color: "#D3D3D3"//折线颜色
									},
									color: '#D3D3D3',//拐点颜色			
									symbol: "none"  ,// 不显示拐点				
								}							 
							},
							markPoint: {
								symbol: 'circle',
								symbolSize: 9,
								data: dataBJ,															
							},							
							markLine:{   //增加标注线
								name:'昨日收盘价',
								symbol: ['none', 'none'],
								label:{
									show:false,
									formatter:  preClose,
									position: 'start',
								},
								lineStyle: {
									color: '#4289c5',
									type: 'solid'
								},
								data: [{
									yAxis: preClose							  
								}]
							}
						},
						{
							name: '分时均价',
							type: 'line',
							gridIndex: 0,
							xAxisIndex: 0,
							yAxisIndex: 0,
							data: getParamValues("jprice", arr),
							itemStyle: {
								normal: {
									lineStyle: {
										width: 1,//折线宽度
										color: "#EBEB00"//折线颜色
									},
									color: '#EBEB00',//拐点颜色							
								}							 
							}
						},							
						{
							name: '分时涨幅',
							type: 'line',
							gridIndex: 1,
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: getParamValues("close", arr),
							smooth: true,
							symbol: "none",						 
							lineStyle: { //标线的样式 
								normal: {
									width: 0
								}
							}							
						},
						{
							name: '成交量',
							type: 'bar',
							gridIndex: 2,
							xAxisIndex: 2,
							yAxisIndex: 2,
							data: getParamValues("vol", arr),
							barWidth: 2,  //柱状图宽度
							itemStyle: {
								color: '#DAA520',							
							}							
						}
					]
				}					
				myChart.setOption(option);
				$(window).resize(myChart.resize);   //解决Echarts 隐藏再显示后宽度高度变小的问题
				//显示最有一个tooltips
				/*myChart.dispatchAction({
					type: 'showTip',
					seriesIndex:0,
					dataIndex:(arr.length-1)
				})*/
			}
		</script>
	</body>
</html>